<template>
    <div class="user">
        <van-nav-bar title="我的余额" left-text="" right-text="" left-arrow @click-left="onClickLeft"
            style="background-color: #F5F5F5;">
            <template #left>
                <van-icon name="arrow-left" size="19" color="#000" />
            </template>
            <!-- <template #right>
                <van-icon name="ellipsis" size="22" color="#000" />
            </template> -->
        </van-nav-bar>
        <div style="width: 100vh;z-index: -1">
            <img src="../../assets/my/yuebg.png" alt="" srcset=""
                style="width: 100%;height: 287px;position: absolute;z-index: -9">
            <div style="margin-top: 42px;text-align: center;position: absolute;">
                <div style="color: #FFFFFF;width: 145px;margin-left: 125px;">
                    总资金(元)
                </div>
                <div style="color: #FFFFFF;width: 145px;margin-top: 20px;margin-left: 120px;font-size: 34px;">
                    ￥{{ userInfo.money }}
                </div>
                <div style="margin-top: 30px;width: 120px;height: 32px;margin-left: 143px;">
                    <van-button
                        style="background-color: #FFFFFF;color: #389138;border-radius: 100px;width: 120px;height: 32px"
                        @click="togoCash">提现</van-button>
                </div>
            </div>
        </div>
        <div class="user-order">
            <van-row>
                <van-col span="8"
                    style="margin-top: 26px;font-family: MiSans, MiSans;font-weight: 600;font-size: 16px;color: #181818;padding-left: 46px;">{{
                        userInfo.total_money }}</van-col>
                <van-col span="8" style="margin-top: 26px;font-family: MiSans, MiSans;
font-weight: 600;
font-size: 16px;
color: #181818;padding-left: 50px;">{{ userInfo.withdraw }}</van-col>
                <van-col span="8" style="margin-top: 26px;font-family: MiSans, MiSans;
font-weight: 600;
font-size: 16px;
color: #181818;padding-left: 50px;">{{ userInfo.frozen_money }}</van-col>
            </van-row>
            <van-row>
                <van-col span="8" style="margin-top: 10px;padding-left: 46px;font-family: MiSans, MiSans;
font-weight: 400;
font-size: 12px;
color: #A2A2A2;">累计收益</van-col>
                <van-col span="8" style="margin-top: 10px;font-family: MiSans, MiSans;
font-weight: 400;
font-size: 12px;
color: #A2A2A2;padding-left: 50px;">已提现(元)</van-col>
                <van-col span="8" style="margin-top: 10px;font-family: MiSans, MiSans;
font-weight: 400;
font-size: 12px;
color: #A2A2A2;padding-left: 50px;">提现中(元)</van-col>
            </van-row>
        </div>

        <div style="margin-top: 31px;background-color: #F5F5F5 !important;display: flex;" @click="tabChange">
            <div v-show="activeName"
                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 18px;color: #181818;margin-left: 12px;">
                收支记录
            </div>
            <div v-show="!activeName"
                style="margin-left: 12px;font-family: Inter, Inter;font-weight: 500;font-size: 15px;color: #666666;">
                收支记录
            </div>
            <div v-show="activeName"
                style="margin-left: 22px;font-family: Inter, Inter;font-weight: 500;font-size: 15px;color: #666666;">
                提现记录
            </div>
            <div v-show="!activeName"
                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 18px;color: #181818;margin-left: 22px;">
                提现记录
            </div>
        </div>
        <div style="display: flex;margin-top: 10px;">
            <div v-if="activeName"
                style="width: 21px;height: 4px;background: #389138;border-radius: 10px;margin-left: 35px;">
            </div>
            <div v-else style="width: 21px;height: 4px;background: #389138;border-radius: 10px;margin-left: 120px;">
            </div>
        </div>

        <div v-show="activeName">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div v-for="(item, index) in list" :key="index">
                    <div class="user-order2">
                        <div
                            style="font-family: MiSans, MiSans;font-weight: 400;font-size: 16px;color: #181818;padding-top: 10px;margin-left: 17px;">
                            售卖成功</div>
                        <div style="display: flex;">
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #666666;padding-top: 19px;margin-left: 17px;width: 32px;">
                                ID:{{ item.id }}</div>
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #CB0000;padding-top: 19px;right: 17px;position: absolute;float: right;">
                                {{ item.price }}</div>
                        </div>
                        <div style="display: flex;">
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 13px;color: #A2A2A2;padding-top: 19px;margin-left: 17px;width: 200px;">
                                {{ item.create_time_text }}</div>
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 13px;color: #181818;right: 17px;padding-top: 20px;position: absolute;float: right;">
                                累计：{{ item.after }}</div>
                        </div>
                    </div>

                </div>

            </van-list>

            <div v-show="list.length == 0">
                <van-list :finished="true" :immediate-check="false">
                    <div class="main2" style="text-align: center;height: 200px;">
                        <img src="@/assets/homr/Group 9420.png" alt="logo"
                            style="width: 180px;height: 120px;margin-top: 40px;">
                        <div>暂无内容</div>
                    </div>
                </van-list>
            </div>
        </div>


        <div v-show="!activeName">
            <van-list v-model="loading2" :finished="finished2" finished-text="没有更多了">
                <div v-for="(item, index) in list2" :key="index">
                    <div class="user-order3">
                        <div style="display: flex;padding-top: 12px;">
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 16px;color: #181818;margin-left: 17px;width: 64px;">
                                提现状态</div>
                            <div v-if="item.status == 0"
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #E58518;position: absolute;float: right;right: 24px;">
                                审核中</div>
                            <div v-else-if="item.status == 1"
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #389138;position: absolute;float: right;right: 24px;">
                                提现通过</div>
                            <div v-else
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #CB0000;position: absolute;float: right;right: 24px;">
                                提现驳回</div>
                            <!-- <div v-else
                            style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #E58518;position: absolute;float: right;right: 24px;">
                            审核中</div> -->
                        </div>
                        <div style="display: flex;padding-top: 19px;">
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;display: inline-block;width: 64px;">
                                提现金额</div>
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;position: absolute;float: right;right: 24px;">
                                ￥{{ item.money }}</div>
                        </div>
                        <div style="display: flex;padding-top: 14px;">
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;width: 64;">
                                到账金额</div>
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;position: absolute;float: right;right: 24px;">
                                ￥{{ item.price }}</div>
                        </div>
                        <div style="display: flex;padding-top: 14px;">
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;display: inline-block;width: 64px;">
                                申请时间</div>
                            <div
                                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #A2A2AA;position: absolute;float: right;right: 24px;">
                                {{ item.create_time_text }}</div>
                        </div>

                    </div>

                </div>
            </van-list>
            <div v-show="list2.length == 0">
                <van-list :finished="true" :immediate-check="false">
                    <div class="main2" style="text-align: center;height: 200px;">
                        <img src="@/assets/homr/Group 9420.png" alt="logo"
                            style="width: 180px;height: 120px;margin-top: 40px;">
                        <div>暂无内容</div>
                    </div>
                </van-list>
            </div>
        </div>



    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { withdrawlist, moneyLog } from '@/api/user'
export default {
    name: 'User',
    components: {

    },
    data() {
        return {
            activeName: true,
            list: [],
            list2: [],
            loading: false,
            finished: false,
            page: 1,
            loading2: false,
            finished2: false,
            page2: 1,
        };
    },
    mounted() {
        //this.init()
    },
    methods: {
        onLoad() {
            // 开始异步请求数据
            this.loading = true;
            // 本次数据更新成功后，将loading设置为false
            moneyLog({
                pageSize: 5,  //num，一页获取多少个
                page: this.page++,   //index初始为0，页码
            }).then((data) => {
                this.loading = false;
                this.list = [...this.list, ...data.data.list]; // 上一页数据跟新加载的数据做合并
                // 判断数据是否加载完毕
                if (data.data.list.length < 1) {
                    // 将finished设置为true,表示所有数据加载完毕
                    this.finished = true;
                }
            });
        },

        tabChange() {
            this.activeName = !this.activeName
            this.getwithdrawlist()
            this.onLoad()
        },
        togoCash() {
            this.$router.push({
                path: '/cash',
               
            })
        },
        getwithdrawlist() {
            this.loading2 = true;
            let obj2 = {
                page: this.page2++,
                pageSize: 5
            }
            withdrawlist(obj2).then((res) => {
                this.loading2 = false;
                this.list2 = [...this.list2, ...res.data.list]; // 上一页数据跟新加载的数据做合并
                // 判断数据是否加载完毕
                this.finished2 = true;

            })
        },
        onClickLeft() {
            this.$router.back()
        }
    },

    computed: {
        ...mapGetters(['userInfo'])
    },
}
</script>

<style scoped>
.user-order {
    width: 702px;
    height: 168px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px;
    margin-top: 42px;
    background-color: #fff;
    margin-top: 410px;
    z-index: 999;
}

.user-order2 {
    width: 702px;
    height: 224px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px;
    margin-top: 42px;
    background-color: #fff;
}

.user-order3 {
    width: 702px;
    height: 270px;
    margin: 0 auto;
    box-shadow: var(--user-order-shadow);
    border-radius: 24px;
    margin-top: 42px;
    background-color: #fff;
}
</style>